<template>
	<view class="box">

		<view class="content">
			<view class="h100" v-if="targetPageData.code=='home'">
				<Home class="h100" />
			</view>
			<view class="h100" v-else-if="targetPageData.code=='my'">
				<My class="h100" />
			</view>
		</view>
		<view class="tabbar">
			<ZoTabBar selectColor='#5E6D82' color="#5E6D82" fontMidIconColor='#98C7F9' :list='tabBarList'
				@midClick="(data)=>handerEvent('TabCon',data)" />
		</view>
	</view>

</template>

<script setup>
	import {
		onMounted,
		reactive,
		computed,
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
		onHide,
		onShareAppMessage,
	} from '@dcloudio/uni-app'
	import config from '@/config/config'
	// import {} from '@/config/APIS.js'
	import ZoTabBar from "../../components/ZOComponents/ZoTabBar/ZoTabBar.vue"
	import Home from "../../components/TBMComponents/Home/index.vue"
	import My from "../../components/TBMComponents/My/index.vue"
	const fuWenBen =
		`<p> &nbsp; &nbsp; &nbsp; &nbsp;<span style=\"color: rgb(89, 191, 192);\">公司介绍说明情况简介就时则沿 的阿井水和</span>v那就是的步伐加快 按时艰苦的回复金卡是撒娇的恢复健康啊士大夫艰苦哈手机打开ask计划的飞机喀什地方艰苦安徽省可见度发挥金卡是的话飞机喀什地方暗黑世界快点发货尽快撒谎到付即可撒可见度话费卡士大夫看见萨迪克就发哈数据库的话费卡是疯狂杀跌回复卡死的回复</p><p><br></p><p> &nbsp; &nbsp; &nbsp; &nbsp;<span style=\"color: rgb(89, 191, 192);\">公司介绍说明情况简介就时则沿 的阿井水和</span>v那就是的步伐加快 按时艰苦的回复金卡是撒娇的恢复健康啊士大夫艰苦哈手机打开ask计划的飞机喀什地方艰苦安徽省可见度发挥金卡是的话飞机喀什地方暗黑世界快点发货尽快撒谎到付即可撒可见度话费卡士大夫看见萨迪克就发哈数据库的话费卡是疯狂杀跌回复卡死的回复</p>`

	const targetPageData = ref({})

	const tabBarList = ref([{
			icon: "calendar",
			selectIcon: "calendar-filled",
			text: "任务",
			code: "home",
		},
		{
			icon: "plus-filled",
			iconSize: 70,

			isCenter: true,
			code: "publish",
		},
		{
			icon: "person",
			selectIcon: "person-filled",
			text: "我的",
			code: "my",
		},
	])

	const getInit = async (mobile) => {
		targetPageData.value = tabBarList.value[0]
	}

	onHide(() => {})
	onShow(() => {})

	const handerEvent = (eType, data) => {
		switch (eType) {
			case 'TabCon': //底部点击触发
				console.log(eType, data, "==eType, data==");

				switch (data.code) {
					case 'home':
					case 'my':
						// uni.setNavigationBarTitle({
						// 	title: data.text //这是修改后的导航栏文字
						// })
						targetPageData.value = data
						break;
					case 'publish':
						// uni.setStorageSync('user',100);
						let user = uni.getStorageSync('user');
						if (user) {
							uni.navigateTo({
								url: "/pages/add/index"
							})
						} else {
							uni.navigateTo({
								url: "/pages/login/index?goPage=add"
							})
						}
						break;
						// case 'my':
						// 	uni.setNavigationBarTitle({
						// 		title: "我的" //这是修改后的导航栏文字
						// 	})
						// 	targetPageData.value = data
						// 	break;
					default:
						break;
				}

				break;
			case 'login': //获取登录信息

				// wx.login({
				// 	//成功放回
				// 	success: async (res) => {
				// 		console.log(res.code, "==jscode===");
				// 		console.log(data.detail.code, "======code==========");
				// 		if (data.detail.errMsg === 'getPhoneNumber:ok') {

				// 			let phoneData = await getUserPhone({
				// 				jscode: res.code,
				// 				code: data.detail.code,
				// 			})
				// 			console.log(data.detail, "====dataa===");
				// 			console.log(phoneData, "====phoneData===");

				// 			if (phoneData?.data) {
				// 				infoMobile.value = phoneData?.data || ''
				// 			} else {
				// 				uni.showLoading({
				// 					title: '未获取到手机号',
				// 					mask: true
				// 				});
				// 				setTimeout(() => {
				// 					uni.hideLoading()
				// 				}, 1500)
				// 			}
				// 			// infoMobile.value = '17775481075'
				// 		} else {
				// 			uni.showLoading({
				// 				title: data.detail.errMsg,
				// 				mask: true
				// 			});
				// 			setTimeout(() => {
				// 				uni.hideLoading()
				// 			}, 1500)
				// 		}
				// 	}
				// })


				break;
			default:
				break;
		}

	}

	// watch(() => infoMobile.value, (newVal, oldVal) => {
	// 	getInit(newVal)
	// })

	onMounted(() => {
		getInit()
	})
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
		// background: url('') no-repeat;
		width: 100vw;
		height: 100vh;
		// background-size: 100% 100%;
		// background-position: center center;
		position: relative;
		overflow: hidden;
		background: linear-gradient(to bottom, #AACFF7, transparent);

		.h100 {
			height: 100%;
		}

		.content {
			width: 100vw;
			height: calc(100% - 182rpx);
			overflow: hidden;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			// justify-content: center;
			// background: url('https://hnah2022.cn/images/zhengtibeijing.png') no-repeat;
		}

		.tabbar {
			// height: 182rpx;
			/* 使用 rpx 适配底部安全区域 */
			// height: calc(140rpx + env(safe-area-inset-bottom));
			width: 100vw;
			position: absolute;
			bottom: 0px;
			// background: #ff5566;
			z-index: 45;
		}
	}
</style>